<template>
    <div class="container">
        <!-- menu -->
        <div class="menu">
            <el-menu
                class="el-menu-vertical-demo"
                background-color="rgb(0, 21, 41)"
                text-color="#fff"
                active-text-color="#1890ff"
                router
                unique-opened
                :default-active="navActive"
                :style="{ width: '210px' }"
            >
                <handMenu
                    :list="constantRoutes"
                />
            </el-menu>
        </div>

        <!-- content -->
        <div class="content">
            <Head />
            <router-view />
        </div>
    </div>
</template>

<script>
import constantRoutes from '@/mock/router/router.js';
import constantRoutesAuth from '@/mock/router/router-auth.js';
import handMenu from '@/components/common/menu';
import Head from '@/components/common/head';
export default {
    components: {
        handMenu,
        Head
    },
    data () {
        return {
            navActive: '',
            constantRoutes: [],
            TO: '',
            iscollapse: true
        };
    },
    watch: {
        $route(val) {
            this.navActive = val.path;
        }
    },
    created () {
        this.TO = this.$route.query.TO;
        this.navActive = this.$route.path;
    },
    mounted () {
        let menu = this.getMenu(constantRoutes);

        let menuList = this.getMenuAuth(menu);

        this.constantRoutes = menuList;
        this.$store.commit('SET_AUTH_LIST', constantRoutesAuth);
        this.routeInit();
        // console.log(menuList, 'menuList');
    },
    methods: {
        /**
         * 默认路由初始
         */
        routeInit () {
            if (this.TO) {
                let to = JSON.parse(unescape(this.TO));

                this.TO = '';
                if (to.path != this.$route.path) {
                    this.$router.replace(to);
                }
            }
        },

        /**
         * 根据权限生成菜单
         */
        getMenu (menuList) {

            let result = [];

            for (var i in menuList) {
                if (menuList[i].auth) {
                    if (this.hasAuth(menuList[i].auth, constantRoutesAuth)) {
                        let tmp = Object.assign({}, menuList[i]);

                        if (tmp.children && tmp.children.length > 0) {
                            tmp.children = this.getMenu(tmp.children);
                        }
                        tmp.authed = true;
                        result.push(tmp);
                    }
                } else {
                    let tmp = Object.assign({}, menuList[i]);

                    if (tmp.children && tmp.children.length > 0) {
                        tmp.children = this.getMenu(tmp.children);
                    }
                    tmp.authed = true;

                    result.push(tmp);
                }

            }
            return result;

        },

        /**
         * 查询权限
         */
        hasAuth (auth,list) {
            let authResult = false;

            if (Array.isArray(auth)) {
                for (var k in auth) {
                    if (!this.checkAuthInList(auth[k], list)) {
                        return false;
                    }
                }
                return true;
            } else {
                return this.checkAuthInList(auth, list);
            }
        },

        checkAuthInList(str, list) {
            for (var i in list) {
                if (escape(str) == escape(list[i].name)) {
                    return true;
                }
            }
            return false;
        },

        getMenuAuth(tmpMenu){
            let menuRes = [];

            for(var i in tmpMenu){
                let hasChild = false;

                if(!tmpMenu[i].children){
                    if(tmpMenu[i].authed){
                        hasChild = true;
                    }
                }else{
                    tmpMenu[i].children = this.getMenuAuth(tmpMenu[i].children);
                    if(tmpMenu[i].children.length > 0){
                        hasChild = true;
                    }
                }

                if(hasChild){
                    menuRes.push(tmpMenu[i]);
                }
            }
            return menuRes;
        },
    }
};
</script>

<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    .menu {
        width: 210px;
        height: 100%;
        background: rgb(0, 21, 41);
    }
    .content {
        flex: 1;
    }
}

</style>
